<!DOCTYPE html>
<html lang="en">
<head>
<meta http-equiv="content-type" content="text/html; charset=UTF-8">
<meta charset="utf-8">
<title>e-Dossier</title>
<meta name="description" content="">
<meta name="author" content="">
<link href="../css/credoc-bootstrap.min.css" rel="stylesheet">

<!-- Temporary link... before merging into credoc-bootstrap.min.css -->
<link href="../css/credoc.css" rel="stylesheet">
<link href="../css/bootstrap-notify.css" rel="stylesheet">

</head>

<body style="padding-top: 42px;">

	<div class="navbar navbar-fixed-top">

		<!-- BLACK GRADIENT HEADER -->
		<div class="top-nav">
			<!-- cf. portal impl -->
			<a href="index.html"><img src="../img/logo.png" height="34"
				width="85"></a>
		</div>
		<!-- end top-nav -->

	</div>
	<!-- end navbar navbar-fixed-top -->

	<header>
		<ul class="breadcrumb" id="breadcrumb">
			<li><a href="">Dashboard</a></li>
			<span class="divider">/</span>
			<li><a href="">Search</a></li>
			<span class="divider">/</span>
			<li><a href="">Consult eDossier (ED-2013-PED758)</a></li>
			<span class="divider">/</span>
			<li><a href="">Consult Deed (D-2013-MAR589)</a></li>
		</ul>
	</header>

	<div id="sidebar-nav">

		<div class="context-header">

			<div class="row">
				<div class="span3">
					<div class="row">
						<div class="span1">
							<div class="pull-left">
								<img src="../img/icon_deed.png" height="34" width="35">
							</div>
						</div>
						<div class="span2 header">
							<div class="row">
								<div class="pull-left">
									<div class="pull-left icon-user icon-gray"></div>
									<div class="pull-left user header-text">John Doe</div>
								</div>
								<!-- end pull-left -->
							</div>
							<!-- end row -->
							<div class="row top-buffer">
								<div class="pull-left">
									<div class="pull-left icon-calendar icon-gray"></div>
									<div class="pull-left user header-text">13/03/2013</div>
								</div>
								<!-- end pull-left -->
							</div>
							<!-- end row -->
						</div>
						<!-- end span2 -->
					</div>
				</div>
			</div>

			<div class="context-title">

				<div>
					<p>
					<h6>Nam nisl turpis, fringilla eu viverra eget, ornare a erat.</h6>
					</p>
				</div>
			</div>

		</div>

		<ul id="dashboard-menu" class="nav nav-list">
			<li class="active "><a href=""><i class="icon-folder-open"></i>
					<span>Deed Info</span></a></li>
			<li class=" "><a href=""><i class="icon-home"></i> <span>Goods</span></a></li>
			<li class=" "><a href=""><i class="icon-user"></i> <span>Parties<span
						class="badge badge-info pull-right">3</span></span></a></li>
			<li class=" "><a href=""><i class="icon-list-alt"></i> <span>Documents<span
						class="badge badge-info pull-right">2</span></span></a></li>
			<li class=" "><a href=""><i class="icon-star"></i> <span>Transactions<span
						class="badge badge-info pull-right">2</span></span></a></li>
			<li class=" "><a href=""><i class="icon-envelope"></i> <span>Expeditions</span></a></li>
			<li class=" "><a href=""><i class="icon-chevron-right"></i>
					<span>References</span></a></li>
			<li class=" "><a href=""><i class="icon-time"></i> <span>History</span></a></li>
		</ul>
	</div>

	</div>

	<div class="container-fluid">
		<div class="row-fluid">
			<div class="span16">
				<div class="content">
				
					<!-- Context page - Button Bar -->

					<div class="button-bar">
						<button class="btn btn-inverse btn-small" type="button">
							<i class="icon-hdd"></i> Save
						</button>
						<button class="btn btn-inverse btn-small" type="button"
							id="delete-btn">
							<i class="icon-trash"></i> Remove
						</button>
					</div>

					<div class='notifications top-right'></div>


					<!-- Modal -->
					<div id="delete-confirm" class="modal hide fade" tabindex="-1"
						role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
						<div class="modal-header">
							<button type="button" class="close" data-dismiss="modal"
								aria-hidden="true">×</button>
							<h4> Remove Deed</h4>
						</div>
						<div class="modal-body">
							
							<div class="media">
								
								
									<a class="pull-left" href="#"> <img class="media-object" src="../img/icon_deed.png"></a>
								
								
								<div class="media-body">
									
									<!-- Nested media object -->
									<div class="media">
										<p><strong>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aliquam dictum condimentum nulla, id ultricies urna dignissim vitae.</strong></p>
										<i class="icon-user"></i><small> John Doe</small>
										<div class="horizontal-offset"> </div>
										<i class="icon-calendar"></i><small>  13/03/2013</small>
									</div>
								</div>
								
							</div>

						</div>
						<div class="modal-footer">
							<div id="loader" style="height: 100%; padding-top: 8px; padding-left: 5px; visibility: hidden;">
								<img src="../img/loading.gif" class="pull-left" style="height: 20px;" />
							</div>
							<button id="delete-deed-cancel" class="btn" data-dismiss="modal" aria-hidden="true">Cancel</button>
							<button id="delete-deed-confirm" class="btn btn-inverse">
								<i class="icon-trash"></i> Remove
							</button>
						</div>
					</div>

					<!-- Context page - Content -->

					<div class="content-pane">

						<div class="row-fluid">
							<div class="span7">
								<div class="group-title">Deed Info</div>
								<hr class="dotted">
							</div>
						</div>

						<form class="form-horizontal">

							<div class="control-group">
								<label class="control-label" for="inputEmail">Completed</label>
								<div class="controls">
									<input type="checkbox" class="span1">
								</div>
							</div>

							<div class="control-group">
								<label class="control-label">Repertorium Number</label>
								<div class="controls">
									<input type="text" placeholder="Repertorium Number"
										class="span6">
								</div>
							</div>

							<div class="control-group">
								<label class="control-label" for="inputPassword">Description</label>
								<div class="controls">
									<textarea class="span6" rows="3"></textarea>
								</div>
							</div>

							<div class="control-group">
								<label class="control-label" for="inputEmail">IT
									Provider</label>
								<div class="controls">
									<input type="text" placeholder="IT Provider" class="span6">
								</div>
							</div>

							<div class="control-group">
								<label class="control-label" for="inputEmail">Penholder</label>
								<div class="controls">
									<select class="span6">
										<option>John Doe</option>
										<option>Marie Dupont</option>
									</select>
								</div>
							</div>

							<div class="control-group">
								<label class="control-label pull-left" for="inputReference">Deed
									date</label>
								<div class="controls">
									<div id="dp3" class="form-inline input-append date"
										data-date-format="dd-mm-yyyy" data-date="10-10-2012">
										<input class="span12" type="text" value="10-10-2012" size="16">
										<span class="add-on"> <i class="icon-calendar"></i>
										</span>
									</div>
								</div>
							</div>

							<!-- 							<div class="control-group"> -->
							<!-- 								<label class="control-label" for="inputEmail">Deed -->
							<!-- 									Registration Status</label> -->
							<!-- 								<div class="controls"> -->
							<!-- 									<select class="span6"> -->
							<!-- 										<option>Opened</option> -->
							<!-- 										<option>Closed</option> -->
							<!-- 									</select> -->
							<!-- 								</div> -->
							<!-- 							</div> -->

							<div class="control-group">
								<label class="control-label">Deed Registration Status</label>
								<div class="controls">
									<label class="control-label">Sent</label>
								</div>
							</div>

							<div class="control-group">
								<label class="control-label">Deed Status</label>
								<div class="controls">
									<label class="control-label">Deed Project</label>
								</div>
							</div>

							<div class="control-group">
								<label class="control-label">Deed Type</label>
								<div class="controls">
									<label class="control-label">Contract de Mariage</label>
								</div>
							</div>

							<div class="control-group">
								<label class="control-label">Deed Reference</label>
								<div class="controls">
									<label class="control-label">DE-2013-BOAT-25896</label>
								</div>
							</div>

							<div class="control-group">
								<label class="control-label">Creation Date</label>
								<div class="controls">
									<label class="control-label">28/03/2013</label>
								</div>
							</div>

							<div class="control-group">
								<label class="control-label">Last collaborator</label>
								<div class="controls">
									<label class="control-label">VINCKE, Jean</label>
								</div>
							</div>

						</form>

					</div>
					<!-- end content-pane -->

				</div>
				<!-- end span10 -->
			</div>
			<!-- end row-fluid -->
		</div>
		<!-- end container-fluid -->

		<footer>
			<div class="footer">
				<div class="container narrow row-fluid"></div>
			</div>
		</footer>

		<!-- LIBRARY -->
		<script src="../js/credoc-scripts.min.js"></script>
		<script src="../js/bootstrap-affix.js"></script>
		<script src="../js/bootstrap-notify.js"></script>

		<script type="text/javascript">
			$('body').tooltip({
				selector : '[rel=tooltip]'
			});
		</script>

		<!--  -->
		<script type="text/javascript">
			
			/* Delete button in context button bar */
			$('#delete-btn').on('click', (function(e) {
				// call confirmation modal
				$('#delete-confirm').modal({
					keyboard : true
				});
			}));

			/* Reposition the modal window once shown */
			$('#delete-confirm').on('show', function(e) {
				var modal = $(this);

				modal.css('margin-top', (modal.outerHeight() / 2) * -1)
					 .css('margin-left', (modal.outerWidth() / 2) * -1);

				return this;
			});
			
			/* Delete confirmation in popup */
			$('#delete-deed-confirm').on('click', (function(e) {
				// call confirmation modal
				$('#loader').css('visibility', 'visible');
				// disable buttons
				$('#delete-deed-confirm').attr("disabled", true);
				$('#delete-deed-cancel').attr("disabled", true);
				setTimeout(function() {
					// remove loader again
					$('#loader').css('visibility', 'hidden');
					// now close popup 
					$('#delete-confirm').modal('hide');
					// display user message
					
					var message = ['top-right', 'success', 'Deed has been succesfully removed.'];
		              
					$('.top-right').notify({
					    message: { text: 'Deed has been succesfully removed.' }
					  }).show(); // for the ones that aren't closable and don't fade out there is a .hide() function.
					  
					$('#delete-deed-confirm').attr("disabled", false);
					$('#delete-deed-cancel').attr("disabled", false);
	                
				}, 1000)
				
			}));
			
			/* Only display the confirmation message once the modal has disappeared */
			$('#delete-deed-confirm').live('hidden', function (e) {
				
			})
			
			
		</script>
</body>
</html>